<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>emm...</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			
			.box {
				text-align: center;
				margin: 20px;
			}
			
			.box a {
				text-decoration: none;
				display: inline-block;
				width: 36px;
				height: 36px;
				line-height: 36px;
				background-color: #f7f7f7;
				border: 1px solid #ccc;
				font-size: 14px;
				color: #000000;
			}
			
			.box .same {
				width: 84px;
			}
			
			.box .dianji {
				background-color: white;
				border: none;
			}
			
			.box .pro {
				width: 48px;
				height: 36px;
				background-color: white;
				border: 1px solid #ccc;
				outline: none;
				font-size: 18px;
				text-indent: 1em;

			}
			
			.box .choose {
				width: 64px;
				height: 36px;
				background-color: #f7f7f7;
				border: 1px solid #ccc;
			}
			
			/* ---------------------------- */
			.box1 {
				width: 210px;
				height: 28px;
				border: 2px solid #b5422a;
				margin: 0 auto;
				line-height: 28px;
				text-align: center;
				font-size: 14px;
			}
			
			.box1 .long {
				position: relative;
				float: left;
				width: 60%;
				height: 100%;
				background-color: #db4b29;
				color: white;
				font-size: 18px;
			}
			
			.box1 .short {
				background-color: white;
				color: #9a9f9b;
				
			}
			
			.long i {
				position: absolute;
				right: 0;
				width: 0;
				height: 0;
				border-width: 28px 12px 0 0;
				border-style: solid;
				border-color: transparent white; 
			}
			
			/* ------------------------ */
			.logo {
				width: 96px;
				height: 96px;
				background-color: #396393;
				margin: 20px auto;
				overflow: hidden;
				transition: all 1s;
			}
			
			.logo:hover {
				transform: translate(50px);
			}
			
			.very-logo {
				width: 100%;
				height: 100%;
				background-color: #91c8e7;
				color: white;
				font-size: 28px;
				line-height: 96px;
				text-align: center;
				transition: all 1s;
				
			}
			
			.very-logo:hover {
				transform-origin: left bottom; 
				transform: rotate(90deg);
			}
		</style>
	</head>
	<body>
		<!-- 行内块元素应用 -->
		<div class="box">
			<a href="#" class="same">&lt;&lt;上一页</a>
			<a href="#"class="dianji">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<a href="#" class="dianji">...</a>
			<a href="#" class="same">&gt;&gt;下一页</a>
			到第
			<input class="pro" type="text" name="" id="" value="" />
			页
			<input class="choose" type="button" name="" id="" value="确定" />
		</div>
		
		<!-- css三角强化 -->
		<div class="box1">
			<span class="long">
				￥2099.00
				<i></i>
				
			</span>
			<span class="short">￥2699.00</span>
		</div>
		
		<!-- 旋转案例 -->
		<div class="logo">
			<div class="very-logo">传媒</div>
		</div>
	</body>
</html>
